<template>
	<view class="page">

		<!-- 回显地址 -->
		<view class="address dis aic jcsb" v-if="addressItem.id">
			<view class="dis aic ">
				<image src="/static/icon/dingwei.png" mode="widthFix" class="icon1"></image>
				<view class="tips">
					<view class="dis jcsb aic">
						<view>{{addressItem.name}}</view>
						<view style="font-size: 28rpx;"> {{addressItem.phone}}</view>
					</view>
					<view class="" style="margin-top: 10rpx;">
						{{addressItem.province}} {{addressItem.city}} {{addressItem.area}}
					</view>
					<view class="" style="margin-top: 10rpx;">
						{{addressItem.address}}
					</view>
				</view>
			</view>
			<image src="/static/icon/icon_right.png" mode="widthFix" class="icon2"></image>
		</view>
		<!-- 回显地址 -->

		<!-- 选取地址 -->
		<view class="address dis aic jcsb" @click="goAddress" v-else>
			<view class="dis aic ">
				<image src="/static/icon/dingwei.png" mode="widthFix" class="icon1"></image>
				<view class="tips">
					请添加收货地址
				</view>
			</view>
			<image src="/static/icon/icon_right.png" mode="widthFix" class="icon2"></image>
		</view>
		<!-- 选取地址 -->


		<view class="detail">
			<view v-for="(item,index) in detail" :key="index"
				:class="[index == detail.length - 1 ? '' : 'borBottom ','dis','aic','li' ]" v>
				<view class="img_box">
					<image :src="item.image" mode="aspectFit" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="">
					<view class="name">
						{{item.name}}
					</view>
					<view class="number">
						×{{item.number}}
					</view>
					<view class="price">
						{{item.price}} 元
					</view>
				</view>
			</view>
			<view class="sumPrice">
				总计：{{totalPrice}}
			</view>
		</view>
		<view class="save" @click="save">
			立即支付
		</view>
	</view>
</template>

<script>
	import {
		groupOrder,
		groupOrderPay,
		getDefaultAddress
	} from "@/api.js"
	export default {
		data() {
			return {
				addressItem: {},
				goodsDetail: {},
				detail: []
			}
		},
		computed: {
			totalPrice() {

				return this.detail
					.reduce((sum, item) => {
						const price = parseFloat(item.price) || 0;
						const quantity = parseInt(item.number) || 0;
						return sum + price * quantity;
					}, 0)
					.toFixed(2); // 保留两位小数（如：53.80）
			},
		},
		onLoad(opt) {
			if (opt.detail) {
				this.detail = JSON.parse(opt.detail)
				console.log('this.detail', this.detail);
				this.getAddress()
			}
			uni.$on('refreshData', (data) => {
				this.addressItem = data
				console.log('data', data);
			});
		},
		methods: {
			async getAddress() {
				let res = await getDefaultAddress()
				if (res.code == 200 && res.result) {
					this.addressItem = res.result
				}
			},
			async save() {

				if (!this.addressItem.id || this.addressItem.id == '') {
					uni.showToast({
						icon: "none",
						title: "请选择地址"
					})
					return
				}
				// 生成订单
				let items = this.detail.map((el) => {
					let obj = {}
					obj.goodNum = el.number
					obj.goodId = el.goodId
					return obj
				})
				console.log('items', items);
				let order = await groupOrder({
					addressId: this.addressItem.id,
					items: items,
				})
				if (order.code == 200) {
					let o = order.result

					let res = await groupOrderPay({
						orderNo: order.result
					})
					if (res.code == 200) {
						let temp = res.result
						console.log('res.result', res.result);
						WeixinJSBridge.invoke('getBrandWCPayRequest', {
								"appId": temp.appId, //公众号ID，由商户传入     
								"timeStamp": temp.timeStamp, //时间戳，自1970年以来的秒数     
								"nonceStr": temp.nonceStr, //随机串     
								"package": temp.package,
								"signType": temp.signType, //微信签名方式：     
								"paySign": temp.paySign //微信签名 
							},
							function(res) {
								if (res.errMsg == 'chooseWXPay:ok') {
									uni.navigateTo({
										url: '/pages/shop/tuanGouPointsOrderDetails?orderNo=' + o
									})

								}
							})

					}


					// uni.showToast({
					// 	icon: 'none',
					// 	title: '兑换成功'
					// })
					// setTimeout(() => {
					// 	uni.navigateTo({
					// 		url: "/pages/shop/exchangeSuccessful"
					// 	})
					// }, 2000)
				}


			},
			goAddress() {
				uni.navigateTo({
					url: "/pages/shop/addressList"
				})
			},
			address(e) {
				console.log('e', e);
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background: #F8F8F8;
		width: 750rpx;
		min-height: 100vh;
		padding-top: 14rpx;

		.address {

			border-top: 1rpx #fff solod;
			padding: 60rpx;
			box-sizing: border-box;
			background: #fff;

			.icon1 {
				width: 40rpx;
			}

			.tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
				margin-left: 18rpx;
			}

			.icon2 {
				width: 15rpx;
			}
		}

		.detail {
			padding: 60rpx;
			box-sizing: border-box;
			background: #fff;
			margin-top: 14rpx;

			.li {
				margin: 20rpx 0;
				padding: 40rpx 0;
			}

			.borBottom {

				border-bottom: 4rpx solid #F8F8F8;
			}

			.img_box {
				width: 256rpx;
				height: 171rpx;
				margin-right: 50rpx;
			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
				width: 356rpx;
			}

			.number {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #686868;
				margin-bottom: 50rpx;
				line-height: 45rpx;
			}

			.price {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #000000;
				margin-top: 40rpx;
				text-align: right;
			}
		}

		.save {
			width: 480rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #F6D44D;
			border-radius: 1805rpx 1805rpx 1805rpx 1805rpx;
			font-family: Roboto, Roboto;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			position: fixed;
			bottom: 60rpx;
			left: 135rpx;
		}
	}

	.sumPrice {
		font-family: Noto Sans SC, Noto Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: red;
	}
</style>